import React, { Component } from 'react';
import {Icon,Dropdown, Menu,Badge} from 'antd';
import './header-right.css';
import { NavLink,withRouter } from 'react-router-dom';
import cookie from 'react-cookies';
import $ from 'jquery';
class HeaderRight extends Component {
    constructor(props) {
        super(props);
        this.state={
            userinfo:{}
        }
        this.getuserinfo()
        console.log(this.props)
    }

    componentDidMount(){
        const that = this;
        // window.onunload  = function(){
        //     that.loginout()
        // }
    }

    path = {
        setting:{
            pathname:'/home/setting',
            state:{p_key:'sub3'}
        },
        logger:{
            pathname:'/home/logger',
            state:{p_key:'sub3'}
        },
        login:{
            pathname:'/login',
            state:{ifrepathname:true}
        },
    };

    getuserinfo(){
        const that = this;
        if(cookie.load('mid')){
            $.ajax({
                url:'/login',
                type:'POST',
                dataType:'json',
                data:{
                    act:'getuserinfo',
                    mid:cookie.load('mid')
                },
                success(e){
                    console.log(e)
                    if(e.status == 2){
                        alert(e.msg)
                        cookie.remove('mid')
                        that.props.history.push(that.path.login)
                    }else{
                    that.setState({
                            userinfo:e.userinfo
                        }) 
                    }
                    
                }
            })
        }else{
            alert('请先登入');
            that.props.history.push(that.path.login)
        }
    }

    loginout=()=>{
        const that = this;
        $.ajax({
            url:'/login',
            type:'POST',
            dataType:'json',
            data:{
                act:'offline',
                mid:cookie.load('mid')
            },
            success(e){
                console.log(e)
                alert(e.msg)
                if(e.status == 1){
                    cookie.remove('mid')
                }
            }
        })
    }

    menu_message = (
        <div className='header_template01'>
            <div className='temp01_title'>公告<p>(4)</p></div>
            <ul>
                <li>
                    <a href="">
                        <div className='header_menu_item_div'>
                            <span>任务名称</span>
                            <p className='no_start'>未开始</p>
                        </div>
                        <p className='header_menu_item_content'>任务需要在2017-01-12 20:00前启动</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div className='header_menu_item_div'>
                            <span>任务名称</span>
                            <p className='maturity'>马上到期</p>
                        </div>
                        <p className='header_menu_item_content'>任务需要在2017-01-12 20:00前启动</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div className='header_menu_item_div'>
                            <span>任务名称</span>
                            <p className='go_time'>已耗时 8 天</p>
                        </div>
                        <p className='header_menu_item_content'>任务需要在2017-01-12 20:00前启动</p>
                    </a>
                </li>
                <li>
                    <a href="">
                        <div className='header_menu_item_div'>
                            <span>任务名称</span>
                            <p className='going'>进行中</p>
                        </div>
                        <p className='header_menu_item_content'>任务需要在2017-01-12 20:00前启动</p>
                    </a>
                </li>
            </ul>
            <div className='temp01_button'>清空待办</div>
        </div>
    );

    user = (
        <ul className='header_user'>
            <li>
                <NavLink to={this.path.setting}>账号设置</NavLink>
            </li>
            <li>
                <NavLink to='/'>清除缓存</NavLink>
            </li>
            <li>
                <NavLink to={this.path.logger}>日志查询</NavLink>
            </li>
            <li>
                {/* <span onClick={this.loginout} className="user_span" >退出</span> */}
                <NavLink onClick={this.loginout} to={this.path.login}>退出</NavLink>
            </li>
        </ul>
    );

    state={
       
    }

    render() { 
        return (
            <div className='header_right'>
                <Dropdown overlay={this.menu_message}>
                    <Badge className='header_right_Badge' count={20}>
                       <Icon type='message' />  
                    </Badge>
                </Dropdown>
                <Dropdown overlay={this.menu_message}>
                    <Badge className='header_right_Badge' count={1}>
                       <Icon type='bell' />  
                    </Badge>
                </Dropdown>
                <Dropdown overlay={this.user}>
                   <div className='user'>
                       <img className="tou_xiang" src={this.state.userinfo.pic!=""?this.state.userinfo.pic:require('../common/images/avatar.png')} alt=""/>
                       {/* <p className='tou_xiang'></p> */}
                       <span>{this.state.userinfo.nickname!=""?this.state.userinfo.nickname:'用户名'}</span>
                   </div>
                </Dropdown>
            </div>
        );
    }
}
 
export default withRouter(HeaderRight);